<template>
  <div class="lang_container">
    <div>
      <van-nav-bar :fixed="true" title="Language" @click-left="onClickLeft">
        <template #left>
          <van-icon :name="arrow" size="18" />
        </template>
      </van-nav-bar>
    </div>
    <!-- Select Radio -->
    <van-radio-group v-model="checked">
      <van-cell-group inset>
        <van-cell v-for="(item, index) in checkList" :key="index" :title="item.title" clickable
          @click="checked = index">
          <template #right-icon>
            <van-radio :name="index" />
          </template>
        </van-cell>
      </van-cell-group>
    </van-radio-group>
    <!-- Confirm -->
    <div class="confirm">
      <div>Confirm</div>
    </div>
  </div>
</template>

<script setup name='Lang'>
import { reactive, ref, onMounted, defineEmits, defineProps, defineExpose } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { userStore } from '@/store'
import arrow from '@/assets/images/user/arrow.png'

// 初始化仓库
const store = userStore()
// 变量区
const router = useRouter()
const route = useRoute()
// 单选框选中参数
const checked = ref('')
// 单选框数据
const checkList = ref([
  {
    title: 'English',
    value: 1
  },
  {
    title: '日本語',
    value: 2
  },
  {
    title: 'Tiếng Việt',
    value: 3
  },
  {
    title: 'Indonesian',
    value: 5
  },
  {
    title: 'Melayu',
    value: 7
  },
  {
    title: 'Deutsch',
    value: 8
  },
  {
    title: 'ภาษาไทย',
    value: 9
  },
  {
    title: 'Português',
    value: 10
  },
  {
    title: 'Français',
    value: 5
  },
  {
    title: 'PyCCKИЙ Я3ЫK',
    value: 6
  },
  {
    title: 'Español',
    value: 7
  },
  {
    title: '简体中文',
    value: 8
  },
  {
    title: '繁體中文',
    value: 9
  },
  {
    title: 'ltalian',
    value: 10
  },
])



// 代码区
const onClickLeft = () => {
  history.back()
  store.SET_PATH_DATA('yes')
}


onMounted(() => {

})

// 将组件中的数据进行暴露出去
defineExpose({

})
</script>

<style lang="scss" scoped>
.lang_container {
  .van-cell-group--inset {
    padding-bottom: 65px;
    padding-top: 48px;
  }

  .confirm {
    position: fixed;
    bottom: 0px;
    width: 100%;
    height: 120px;
    overflow: hidden;
    background: #fff;

    div {
      position: fixed;
      bottom: -40px;
      left: 50%;
      transform: translateX(-50%);
      background: #82a8f9;
      width: 90%;
      height: 100px;
      border-radius: 40px;
      margin-bottom: 50px;
      text-align: center;
      line-height: 100px;
      color: #fff;
      font-size: 32px;
      font-weight: 700;
    }
  }
}
</style>